<template>
  <view class="textMain typing-effect" :style="props.textStyle">
    <uv-transition :show="true" mode="slide-left" duration="800" timingFunction="ease">
      {{ typingText }}
    </uv-transition>
  </view>
</template>

<script setup lang="ts">
let props = defineProps(["modelValue", "textStyle", "speed"]);
const emit = defineEmits(["fatherMethods"]);
let typingText = ref("");

function typeWriter(text, speed) {
  let i = 0;
  function type() {
    if (i < text.length) {
      typingText.value += text.charAt(i);
      i++;
      setTimeout(type, speed);
    } else {
      console.log("动画结束");
      emit("fatherMethods");
    }
  }
  type();
}

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) typeWriter(newValue, props.speed ? props.speed : 50);
  },
  { immediate: true, deep: true }
);
</script>



<style lang="scss" scoped>
.textMain {
  display: inline;
}
.typing-effect {
  font-size: 24px;
  color: #333;
  animation: typing 4s steps(30, end) slide-in,
    blink-caret 0.5s step-end slide-in;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}
</style>
